/*
 * @Author: luodong 
 * @Date: 2017-09-06 11:16:01 
 * @Last Modified by: luodong
 * @Last Modified time: 2017-09-09 14:09:30
 */

import React from 'react';
import { getDetail,getTimeCha } from '../api'
import '../style/home.scss';




export default class Home extends React.Component {

    constructor(props) {
        super(props); 
        this.state = {
            bmVisible:false,
            content:{
                template:'bule',
                effects:'none',
                m1Title:'火热活动进行中',
                m2Title:'产品描述',
                m2Content:'',
                m3Title:'活动规则',
                m3Content:'',
                m4Title:'领奖信息',
                m4Content:'领奖时间： 领奖电话：',
                m5Title:'机构介绍',
                m5Content:'',
                m6Title:'咨询电话',
                m7Content:'',
                formName:'',
                formPhone:'',
                formDiy1:'',
                formDiy2:'',
                formDiy3:'',
                formDiyCheck:[false,false,false], //表单是否必填
                startTime:'',
                endTime:'',
                title:'欢迎参加在线报名活动',
                number:'100', //最多人数
                Cost:0, //报名费用
                Deposit:0, //报名订金
            },
            form:{          //报名相关字段
                totail:5,   //已报名人数
            },
            createTime:'',
            describe:'',
            endTime:'',
            startTime:'',
            djsTime:'0天0时00分00秒',
            title:'',
        }

        this.changTime; //报名时间定时器变量
    }

    componentDidMount() {
        getDetail(42,(res)=>{
            console.log(res)
            console.log(JSON.parse(res.content))
            let content = JSON.parse(res.content);

            this.setState({
                content:content,
                createTime:res.createTime,
                describe:res.describe,
                endTime:res.endTime,
                startTime:res.startTime,
                djsTime:getTimeCha(content.endTime),
                title:res.title,
            })
        });

        //改变报名结束时间
        this.changTime = setInterval(()=>{
            this.changeEndTime();
        },1000 )
    }

    /**
     * 改变报名时间
    */
    changeEndTime(){
        if(!getTimeCha(this.state.content.endTime)){
            clearTimeout(this.changTime)
            this.setState({
                djsTime:'0天0时0分0秒'
            })
        }else{
            this.setState({
                djsTime:getTimeCha(this.state.content.endTime)
            })
        }
    }

    /**
     * 报名
     */ 
    doBaoMing(){
        this.showBmModal()
    }

    showBmModal(){
        this.setState({
            bmVisible:!this.state.bmVisible
        })
    }

    render () {
        return ( 
            <div className={`Home ${this.state.content.template}`}>
                <img className="topImg" src={this.state.content.topImg}/>
                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value={this.state.content.m1Title}/></span>
                    <div className="Title">{this.state.content.title}</div>
                    <p>活动结束倒计时：<b>{this.state.djsTime}</b></p>
                    <div className="d3">
                        <p>已报名：<b>{this.state.form.totail}人</b>/限{this.state.content.number}人 费用：<b>￥{this.state.content.Cost}</b></p>
                    </div>
                    <div className="formList">
                        <p><b>10</b>人查看</p>
                        <p><b>2</b>人分享</p>
                        <p><b>5</b>人报名</p>
                    </div>
                </div>
                
                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value={this.state.content.m2Title}/></span>
                    <div className="content" dangerouslySetInnerHTML={{__html: this.state.content.m2Content}}>
                    
                    </div>
                </div>

                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value="在线报名"/></span>
                    <div className="zxbm">
                        <div className="zxbm_name">他们正在参加活动</div>
                        <div className="zxbm_head">
                            <img src='http://img2.imgtn.bdimg.com/it/u=761993572,3960705356&fm=27&gp=0.jpg'/>
                            <img src='http://img2.imgtn.bdimg.com/it/u=761993572,3960705356&fm=27&gp=0.jpg'/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                            <img src={this.state.content.topImg}/>
                        </div>
                        <div className="cyj">报名诚意金：0元</div>
                        <div className="bmBtn" onClick={this.doBaoMing.bind(this)}>我要报名</div>
                    </div>
                </div>

                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value={this.state.content.m3Title}/></span>
                    <div className="content" dangerouslySetInnerHTML={{__html: this.state.content.m3Content}}>
                    
                    </div>
                </div>

                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value={this.state.content.m4Title}/></span>
                    <div className="content" dangerouslySetInnerHTML={{__html: this.state.content.m4Content}}>
                    
                    </div>
                </div>

                <div className="m1">
                    <span className="ribbon5"><input className="m1_TitleInput" type="text" value="报名表"/></span>
                    <div className="btou">
                        <div className="tb1">排行</div>
                        <div className="tb2">头像</div>
                        <div className="tb3">姓名</div>
                        <div className="tb4">时间</div>
                    </div>
                    <div className="bnr">
                        <div className="tb1">1</div>
                        <div className="tb2"><img className="table_head" src='http://img2.imgtn.bdimg.com/it/u=761993572,3960705356&fm=27&gp=0.jpg'/></div>
                        <div className="tb3">周润发</div>
                        <div className="tb4">2091-33-33</div>
                    </div>
                    <div className="bnr">
                        <div className="tb1">1</div>
                        <div className="tb2"><img className="table_head" src='http://img2.imgtn.bdimg.com/it/u=761993572,3960705356&fm=27&gp=0.jpg'/></div>
                        <div className="tb3">周润发</div>
                        <div className="tb4">2091-33-33</div>
                    </div>
                    <div className="bnr">
                        <div className="tb1">1</div>
                        <div className="tb2"><img className="table_head" src='http://img2.imgtn.bdimg.com/it/u=761993572,3960705356&fm=27&gp=0.jpg'/></div>
                        <div className="tb3">周润发</div>
                        <div className="tb4">2091-33-33</div>
                    </div>
                </div>
                {this.state.bmVisible ?
                <div className="modal">
                    <div className="m1 mm1">
                        <div className="clean" onClick={this.showBmModal.bind(this)}>X</div>
                        <span className="ribbon5"><input className="m1_TitleInput" type="text" value="我要报名"/></span>
                        <div className="mm1Info">所填信息不会公告，仅用户活动兑奖</div>
                        <input type="text" className="m1t2" value="" placeholder="请填入真实姓名"/>
                        <input type="text" className="m1t2" value="" placeholder="请填入手机号码"/>
                        <div className="bmBtn">提交</div>
                    </div>
                </div>
                : [] }
            </div>)
    }

}
